<template>
  <div class="login">
    <div class="header">
      <el-page-header @back="goBack" content="密码登录"> </el-page-header>
    </div>
    <div class="inp">
      <div class="inpOne">
        <input type="text" placeholder="账号" v-model="userV" /><br />
      </div>
      <div class="inpOne">
        <input :type="typeV" placeholder="密码" v-model="pwV" />
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          class="switch"
          @change="changeSwitch"
        >
        </el-switch>
      </div>
      <div class="inpOne">
        <input type="text" placeholder="验证码" v-model="codeV" />
        <img :src="code && code" @click="getCode" alt="" />
        <div class="changeImg">
          <span>看不清</span>
          <span class="changeOne" @click="getCode">换一张</span>
        </div>
      </div>
    </div>
    <div class="tips">
        <p>温馨提示：未注册过的账号,登录时讲自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
    </div>
    <button @click="login" class="btn">登录</button>
    <p class="reset" @click="resetPwd">重置密码？</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "login",
  data() {
    return {
      value: false, //开关的值
      typeV: "password", //密码框的初始状态
      code: "",
      userV: "",
      pwV: "",
      codeV: "",
    };
  },
  computed: {
    ...mapState(["eleUrl","userLoginMsg"]),
  },
  created() {
    this.getCode();
  },
  methods: {
    //返回上一頁
    goBack() {
      this.$router.back();
    },
    getCode() {
      //let api="https://elm.cangdu.org/v1/captchas"
      let api = this.eleUrl.yzcode;
      this.$http({
        url: api,
        method: "post",
        //用于用户代码是否应该在请求情况下，向其他域发送cookie，不使用缓存数据
        //主要用于验证码
        withCredentials: true,
        data: {},
      }).then((res) => {
        //console.log(res.data)
        this.code = res.data.code;
      });
    },
    login() {
      let api = this.eleUrl.login;
      this.$http({
        url: api,
        //用于用户代码是否应该在请求情况下，向其他域发送cookie，不使用缓存数据,
        //主要用于验证码
        withCredentials: true,
        method: "post",
        data: {
          username: this.userV,
          password: this.pwV,
          captcha_code: this.codeV,
        },
      }).then((res) => {
        console.log(res.data);
        // 登录成功
        if(res.status=200&&res.statusText=='OK'){
            this.$store.commit('getUserLoginMsg', res.data);
            this.$store.commit('bottomActive',3)
            this.$router.push({
            name:'my'
        })
        }
      });
    },
    //密码是否密文显示
    changeSwitch() {
      //   console.log(this.value);
      this.typeV = this.value ? "text" : "password";
    },
    //重置密码路由跳转
    resetPwd(){
        this.$router.push({
            name:'reset'
        })
    }
    },
};
</script>

<style scoped>
.login {
    font-size: .15rem;
  background-color: #f6f6f6;
}
.header >>>.el-page-header__content{
    color: white;
    font-weight: 500;
    margin-left: .7rem;
}
.header >>> .el-page-header {
  color: white;
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  background-color: rgb(80, 143, 238);
}

/* 输入框 */
.inp {
  margin-top: .15rem;
  background-color: #fff;
}
.inpOne {
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  border-bottom: 1px solid #ddd;
}
.inpOne img {
  vertical-align: middle;
}
.inp input {
  border: none;
  outline: none;
  font-size: .16rem;
  margin-left: .1rem;
}
.switch {
  margin-left: 1rem;
}
.changeImg {
  width: .5rem;
  height: .5rem;
  float: right;
  font-size: .1rem;
  line-height: .25rem;
  text-align: center;
}
.changeOne {
  color: #4a90e6;
}
/* 温馨提示 */
.tips{
    font-size: .14rem;
    color: rgb(211, 68, 68);
}
.tips>p{
    margin: .1rem;
}
/* 登录按钮 */
.btn{
    width: 96%;
    height: .4rem;
    display: block;
    margin: 0 auto;
    border: none;
    color: white;
    font-size: .16rem;
    background-color: #67D96A;
    border-radius: 5px;
}
/* 重置密码 */
.reset{
    text-align: right;
    color: #4a90e6;
    margin-top: .2rem;
}
</style>